<template>
	<div class="user_login" :style="{ height: evieHeight}">
		<div v-if="selectTime==1">
			<shiJ @dsplay1='dsplay1' @dsplay2='dsplay2'  :message='quf'></shiJ>
		</div>
		<div class="box">
			<div class="boxa">
				<div>机架编号</div>
				<div>全部</div>
			</div>
			<div class="boxb">
				<div>掉线时间</div>
				<div @click="selectTime1">{{diaox1}}</div>
				<div>
					<img src="../../../static/img/opration/right.png">
				</div>
			</div>
			<div class="boxb">
				<div>上线时间</div>
				<div @click="selectTime2">{{shangx1}}</div>
				<div>
					<img src="../../../static/img/opration/right.png">
				</div>
			</div>
			<div class="boxb">
				<div>掉线原因</div>
				<div>
					<picker @change="bindPickerChange" :value="index1" :range="array">
						<view class="picker">
						{{array[index1]}}
						</view>
					</picker>
				</div>
				<div>
					<img src="../../../static/img/opration/right.png">
				</div>
			</div>
		</div>
		<div class="tJ" @click="tJ">提交</div>
		</div>
	</div>
</template>

<script>
import shiJ from "../../components/shiJ.vue";
import js from "../../utils/js"
export default {
	data() {
		return {
		index1: 0,
		array: [
			"显卡问题",
			"矿机过热",
			"电信断网",
			"水电站断电",
			"风扇故障",
			"矿机维修",
			"其他原因"
		],
		evieHeight: "",
		yuanY: "显卡问题", //已选原因,
		//掉线时间
		diaox1: "请选择掉线时间",
		diaox2: "", //已选择掉线时间
		//上线时间
		shangx1: "请选择上线时间",
		shangx2: "", //已选择上线时间
		quf: "",
		selectTime: 0
		};
	},

	components: {
		shiJ
	},
	mounted() {
		this.evieHeight = wx.getSystemInfoSync().windowHeight + "px";
	},
	methods: {
		bindPickerChange(e) {
			this.index1 = e.mp.detail.value;
			this.yuanY = this.array[e.mp.detail.value];
		},
		dsplay1(e) {
			this.selectTime = e;
			if (e[2] == 1) {
				this.diaox1 = e[1];
				this.diaox2 = e[3];
			}
			if (e[2] == 2) {
				this.shangx1 = e[1];
				this.shangx2 = e[3];
			}
		},
		dsplay2(e) {
			this.selectTime = e;
			this.biaoH = e[1];
		},
		selectTime1() {
			this.selectTime = 1;
			this.quf = 1;
		},
		selectTime2() {
			this.selectTime = 1;
			this.quf = 2;
		},
		tJ() {
			if (this.diaox2 == "") {
				wx.showToast({
					title: "请选择掉线时间",
					icon: "none"
				});
				return;
			}
			if (this.shangx2 == "") {
				wx.showToast({
					title: "请选择上线时间",
					icon: "none"
				});
				return;
			}
			if(this.diaox2>this.shangx2){
				wx.showToast({
					title: '掉线时间不可大于上线时间',
					icon: "none"
				});
				return;
			}
			if(this.yuanY==''){
				wx.showToast({
					title: '请选择原因',
					icon: "none"
				});
				return;
			}
			
			wx.showModal({
				title: '提交提示',
				content: '确认提交全矿场机架吗？',
				success:(res) => {
					if (res.confirm) {
						this.submitFn();
					} else if (res.cancel) {
						// console.log('用户点击取消')
					}
				}
			})
		
		},
		initData(){
			this.diaox1 = "请选择掉线时间";
			this.shangx1 = "请选择上线时间";
			this.yuanY = "显卡问题";
			this.index1 = 0;
		},
		submitFn(){
			wx.showLoading({
				title:"提交中..."
			});
			//this.$API = js(wx);	
			this.$API
			.post(
			"/Operation/postDrops",
			{
				type: "drops_all",
				content: this.yuanY,
				drop_line_time: this.diaox2,
				on_line_time: this.shangx2,
				token: wx.getStorageSync("user_token"),
				user_id: wx.getStorageSync("user_id")
			}
			//true
			)
			.then(res => {
				if(res){
					wx.showToast({
						title:"提交成功"
					});
					wx.hideLoading();
					this.initData();
				}else{
					wx.showToast({
						title:"请求失败",
						icon:"none"
					});
				}
				
			});
		},
	},

	created() {}
};
</script>

<style scoped>
.user_login {
  width: 750rpx;
  position: relative;
  overflow: hidden;
  background-color: white;
}
.input {
  width: 750rpx;
  height: 88rpx;
  background-color: #e5e5e5;
  font-size: 28rpx;
}
.first_icon {
  width: 40rpx;
  height: 40rpx;
  margin-top: 10rpx;
}
.search {
  width: 600rpx;
  float: left;
  height: 60rpx;
  border-radius: 60rpx;
  background-color: rgb(243, 239, 239);
  margin-left: 30rpx;
  margin-top: 14rpx;
}
.search input {
  height: 40rpx;
  margin-left: 70rpx;
  margin-top: 4rpx;
}
.first_icon {
  float: left;
  margin-left: 10rpx;
}
.search_2 {
  width: 90rpx;
  float: left;
  text-align: right;
  line-height: 88rpx;
}
.img2 {
  width: 212rpx;
  height: 166rpx;
  margin-left: 269rpx;
  margin-top: 150rpx;
}
.tiS {
  text-align: center;
  color: #999999;
  font-size: 24rpx;
}
.boxa,
.boxb {
  width: 720rpx;
  height: 100rpx;
  margin-left: 30rpx;
  border-bottom: 2rpx solid #e5e5e5;
  box-sizing: border-box;
}
.boxa > div {
  width: 345rpx;
  float: left;
  line-height: 100rpx;
}
.boxa > div:nth-of-type(1) {
  font-weight: bolder;
  font-size: 32rpx;
}
.boxa > div:nth-of-type(2) {
  font-size: 32rpx;
  text-align: right;
  color: #999999;
}
.boxb div:nth-of-type(1) {
  font-weight: bolder;
  font-size: 32rpx;
  float: left;
  line-height: 100rpx;
  width: 200rpx;
}
.boxb div:nth-of-type(2) {
  text-align: right;
  color: #999999;
  font-size: 32rpx;
  float: left;
  line-height: 100rpx;
  width: 430rpx;
}
.boxb img {
  width: 40rpx;
  height: 40rpx;
}
.boxb div:nth-of-type(3) {
  font-weight: bolder;
  font-size: 32rpx;
  float: left;
  margin-left: 30rpx;
  margin-top: 30rpx;
}
.tJ {
  color: white;
  width: 560rpx;
  height: 80rpx;
  font-size: 32rpx;
  background-color: #20c9e1;
  text-align: center;
  line-height: 80rpx;
  border-radius: 8rpx;
  margin-left: 95rpx;
  margin-top: 100rpx;
  position: absolute;
  /* bottom: 20rpx; */
}
</style>
